<template>
  <section class="component modify-organize">
    <!--修改机构-->
    <el-form :rules="modifyDeptRules" :model="modifyDeptModel" ref="modfiy-dept" label-width="130px">
      <el-form-item label="机构名称" prop="deptName">
        <el-input v-model="modifyDeptModel.deptName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="modifyDeptModel.remark" :autosize="{ minRows:2, maxRows:4}" :maxlength="500"></el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-row type="flex" justify="center">
          <el-button @click="close('modfiy-dept')">取消</el-button>
          <el-button @click="confirmClick('modfiy-dept')">确定</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State, Mutation, Getter, namespace } from "vuex-class";
import { DepartmentService } from "~/service/service-manage/department.service";
import { Emit, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class ModifyOrganize extends Vue {
  @Dependencies(DepartmentService)
  private departmentService: DepartmentService;

  @Prop({
    type: Object,
    required: true
  })
  originDeptData: any;

  // 修改机构参数
  private modifyDeptModel: any = {
    deptName: "",
    remark: "",
    id: ""
  };
  /**
   * 添加机构信息校验规则
   */
  private modifyDeptRules: any = {
    deptName: [{ required: true, message: "请输入机构名称", trigger: "blur" }]
  };

  /**
   * 修改机构弹框打开触发事件
   */
  isOpen() {
    this.modifyDeptModel.deptName = this.originDeptData.deptName
    this.modifyDeptModel.remark = this.originDeptData.remark
    this.modifyDeptModel.id = this.originDeptData.id
  }

  /**
   * 修改机构确认
   */
  confirmClick(form) {
    let modifyDeptFrom: any = this.$refs[form];
    modifyDeptFrom.validate(valid => {
      if (valid) {
        this.departmentService.updateDept(this.modifyDeptModel).subscribe(
          data => {
            this.$message.success("修改成功!");
            // 刷新机构树
            this.$emit("refresh");
            // 关闭dialog
            this.close(form);
          },
          err => this.$message.error(err.msg)
        );
      }
    });
  }

  /**
   * 关闭窗口
   */
  close(form) {
    let modifyDeptFrom: any = this.$refs[form];
    modifyDeptFrom.resetFields();
    this.$emit("close");
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.data-grid {
  margin-bottom: 10px;
}

.header {
  border: solid 1px #dee1e5;
  border-bottom: 0px;
  height: 40px;
  line-height: 40px;
}
</style>
